<template>
  <div class="app-container home">
    <el-row>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>饼状图示例</span>
            <span style="float: right; padding-bottom: 5px">
<el-select v-model="checkYear" size="small" placeholder="请选择活动
区域">
<el-option label="2025" value="2025"></el-option>
<el-option label="2024" value="2024"></el-option>
<el-option label="2023" value="2023"></el-option>
</el-select>
<el-button style="margin-left: 10px" type="text"
           @click="getDataByCheckYear">操作按钮</el-button>
</span>
          </div>
          <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
          <div id="left" style="width: 600px;height:400px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  name: "Index",
  data() {
    return {
      checkYear: 2025,
      /** 图表对象 */
      leftChart: undefined,
      /** 图表配置对象：初始数据都应该来源于官方参考拷贝 */
      leftOption : {// 官方代码使用等号赋值，vue中需要使用冒号定义
        title: {
          text: 'Referer of a Website',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  methods: {
    getDataByCheckYear(){
// console.log(this.checkYear)
// 调用api中定义的方法，请求后端获取新的动态数据
// 替换option中对应的数据
// this.leftOption.series[0].data = 后端返回的对象数组数据
// 刷新图表，再次调用setOption方法
      this.leftChart.setOption(this.leftOption)
    }
  },
// 在页面加载前执行，网页元素没有被读取
  created() {
  },
// 在页面加载后执行，网页元素已经读取完成
  mounted() {
// 基于准备好的dom，初始化echarts实例
//     2.后端开发
//     开发前必须思考后端环境数据样子：
// 饼状图开发
//     饼状图需要返回数据 ：-> 一个对象集合，对象属性名必须为value和name
//     前端数据
//     后端实现：
// 自定义实体：
// 自定义一个类完成前端数据映射
//     mapper/Service开发：
// 省略.....
//     Controller开发：
this.leftChart = echarts.init(document.getElementById('left'));
// 通过方法setOption，使用刚指定的配置项和数据显示图表
    this.leftChart.setOption(this.leftOption)
  }
}
</script>
<style scoped lang="scss">
</style>
